<template>
  <div>
    <van-sku
        v-model="show"
        :sku="sku"
        :goods="goods"
        :goods-id="goodsId"
        :quota="quota"
        :quota-used="quotaUsed"
        :hide-stock="sku.hide_stock"
        :message-config="messageConfig"
        @buy-clicked="onBuyClicked"
        @add-cart="onAddCartClicked"
    >
      <template #sku-header-price="props">
        <span style="color: #ff3331;font-size: 22px; font-weight: bold;">￥ {{ props.price }} <span
            style=" font-size: 16px;color:#999;text-decoration: line-through; font-weight: lighter">￥{{
            props.originPrice
          }}</span></span>
      </template>
      <template #sku-header-origin-price="props">
        <span style=" font-size: 16px;color:#999;text-decoration: line-through"></span>
      </template>


    </van-sku>
  </div>
</template>

<script>
import {Sku} from 'vant';

export default {
  name: "SkuView",
  components: {
    Sku,
  },
  props: {
    show: true,
  },
  data() {
    return {

      goodsId: 1000,
      quota: 5,
      quotaUsed: 0,
      sku: {
        // 所有sku规格类目与其值的从属关系，比如商品有颜色和尺码两大类规格，颜色下面又有红色和蓝色两个规格值。
        // 可以理解为一个商品可以有多个规格类目，一个规格类目下可以有多个规格值。
        tree: [
          {
            k: '版本', // skuKeyName：规格类目名称
            k_s: 's1', // skuKeyStr：sku 组合列表（下方 list）中当前类目对应的 key 值，value 值会是从属于当前类目的一个规格值 id
            v: [
              {
                id: '1', // skuValueId：规格值 id
                name: '8GB+128GB', // skuValueName：规格值名称
              },
              {id: '2', name: '8GB+256GB',},
              {id: '3', name: '12GB+256GB',},
              {id: '4', name: '12GB+512GB',}
            ],
            largeImageMode: false, //  是否展示大图模式
          },
          {
            k: '颜色', // skuKeyName：规格类目名称
            k_s: 's2', // skuKeyStr：sku 组合列表（下方 list）中当前类目对应的 key 值，value 值会是从属于当前类目的一个规格值 id
            v: [
              {
                id: '1', // skuValueId：规格值 id
                name: '白色', // skuValueName：规格值名称
              },
              {id: '2', name: '黑色',},
              {id: '3', name: '原野绿',},
              {id: '4', name: '紫色',},
            ],
            largeImageMode: false, //  是否展示大图模式
          }
        ],
        // 所有 sku 的组合列表，比如红色、M 码为一个 sku 组合，红色、S 码为另一个组合
        list: [
          {
            id: 2259, // skuId
            s1: '1', // 规格类目 k_s 为 s1 的对应规格值 id
            s2: '1', // 规格类目 k_s 为 s2 的对应规格值 id
            price: 459900, // 价格（单位分）
            origin_price: 469900,//原价
            stock_num: 100 // 当前 sku 组合对应的库存
          },
          {id: 2260, s1: '2', s2: '1', price: 489900, origin_price: 499900, stock_num: 100},
          {id: 2261, s1: '3', s2: '1', price: 529900, origin_price: 539900, stock_num: 100},
          {id: 2262, s1: '4', s2: '1', price: 579900, origin_price: 589900, stock_num: 100},
          {id: 2263, s1: '1', s2: '2', price: 459900, origin_price: 469900, stock_num: 100},
          {id: 2264, s1: '2', s2: '2', price: 489900, origin_price: 499900, stock_num: 100},
          {id: 2265, s1: '3', s2: '2', price: 529900, origin_price: 539900, stock_num: 100},
          {id: 2266, s1: '4', s2: '2', price: 579900, origin_price: 589900, stock_num: 100},
          {id: 2267, s1: '2', s2: '3', price: 489900, origin_price: 499900, stock_num: 100},
          {id: 2268, s1: '3', s2: '3', price: 529900, origin_price: 539900, stock_num: 100},
          {id: 2269, s1: '2', s2: '4', price: 489900, origin_price: 499900, stock_num: 100},
          {id: 2270, s1: '3', s2: '4', price: 529900, origin_price: 539900, stock_num: 100},
        ],
        price: '4899', // 默认价格（单位元）
        origin_price: '4999',
        stock_num: 1200, // 商品总库存
        collection_id: 2261, // spu_id
        none_sku: false, // 是否无规格商品

        hide_stock: false // 是否隐藏剩余库存
      },
      goods: {
        picture: 'https://img11.360buyimg.com/n1/jfs/t1/221711/18/17054/171875/628c934bEb21466ab/7e70bbaf92b3d7d0.jpg'
      },
      messageConfig: {
        // 数据结构见下方文档
      },
    };
  },
  methods: {
    onBuyClicked() {
    },
    onAddCartClicked() {
    },
    test(pram) {
      console.log(pram)
    }
  }
}
</script>

<style scoped>

</style>